<form [formGroup]="form" (ngSubmit)="requestPass()" role="form" class="flex flex-col justify-start items-stretch">
  <mat-tab-group mat-align-tabs="start" mat-stretch-tabs="false" disableRipple>
    <mat-tab [label]="'Auth.RequestPassword' | translate: {Default: 'Request Password'}">
      <div class="flex flex-col justify-start items-stretch p-2">
        <div>
          <label for="email" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
            {{ 'AUTH.LOGIN.ACCOUNT' | translate: {Default: 'Account'} }}
          </label>
          <input matInput type="email" name="email" id="email" formControlName="email" [placeholder]="'AUTH.LOGIN.USERNAME' | translate: {Default: 'Username / Email'} "
            class="ngm-input-element"
            required>
        </div>
  
        <div class="mt-4">
          <button class="relative inline-flex items-center justify-center cursor-pointer p-0.5 mb-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group
            bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800
            disabled:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50"
            [disabled]="submitted || form.invalid">
            <span class="relative w-full px-5 py-2.5 transition-all ease-in duration-75 bg-white rounded-md
              group-hover:bg-opacity-0 group-disabled:bg-opacity-100
              dark:bg-gray-900">
              {{ 'Auth.RequestSend' | translate: {Default: 'Send'} }}
            </span>
          </button>
        </div>
        
        <div class="w-full my-4">
          <mat-divider class="w-full"></mat-divider>
        </div>

        <div class="flex flex-row justify-between items-center">
          <a routerLink="/auth/login">{{ 'Auth.Signin' | translate: {Default: 'Sign-in'} }}</a>
          <a routerLink="/auth/register">{{ 'Auth.Signup' | translate: {Default: 'Signup'} }}</a>
        </div>
      </div>
    </mat-tab>
  </mat-tab-group>
</form>
